<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入重置样式 -->
    <link rel="stylesheet" href="./css/reset.css">
    <!-- 引入less样式文件 -->
    <link rel="stylesheet/less" href="./css/less.less">
    <!-- 引入bootstrap样式文件 -->
    <!-- <link rel="stylesheet" href="./css/bootstrap.min.css"> -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> 
    <!-- 引入wow文件 -->
    <link rel="stylesheet" href="./css/animate.min.css">
    <style>
    @font-face {
       font-family: 'iconfont';
       src: url('iconfont.woff2?t=1687228988416') format('woff2'),
       url('iconfont.woff?t=1687228988416') format('woff'),
       url('iconfont.ttf?t=1687228988416') format('truetype');
    }
    .center-block{
        margin-top: 5px;
    }
    body,html{
        scroll-behavior: smooth;
    }
    </style>
</head>
<body>
    <!-- 头部 -->
    <div class="header">
        <div class="container">
            <div class="row">
                <nav class="navbar navbar-default" role="navigation">
                    <div class="container-fluid">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse"
                                data-target="#example-navbar-collapse">
                            <span class="sr-only">切换导航</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand logo wow fadeInLeft" href="#">Spirit8</a>
                    </div>                                  
                    <div class="collapse navbar-collapse " id="example-navbar-collapse">
                        <ul class="nav navbar-nav navbar-right nav">
                            <li class="active wow fadeInDown" data-wow-delay="0ms "><a href="#a">HOME</a></li>
                            <li class="wow fadeInDown" data-wow-delay="100ms "><a href="#b">About</a></li>
                            <li class="wow fadeInDown" data-wow-delay="200ms "><a href="#c">SERVICES</a></li>
                            <li class="wow fadeInDown" data-wow-delay="300ms "><a href="#d">portfolio</a></li>
                            <li class="wow fadeInDown" data-wow-delay="400ms "><a href="#e">testimonials</a></li>
                            <li class="wow fadeInDown" data-wow-delay="500ms "><a href="#f">CONTACT</a></li>
                        </ul>
                    </div>
                    </div>
                </nav>
            </div>
          </div>
    </div>

    <!-- 背景图 -->
    <div class="banner">
        <div class="banner_top wow fadeInDown">
            <span>wELCOME on</span>
            <span>spirit8</span>
        </div>

        <div class="banner_center wow fadeInDown">
            <p>We are a digital agency with years of experience and with extraordinary people</p>
        </div>

        <div class="banner_bottom wow rubberBand">
            ↓
        </div>
    </div>

    <!-- 内容 -->
    <div class="main" id="a">
        <div class="container">
            <div class="row">

                 <!-- 左边内容 -->
                <div class="col-lg-6 col-md-6 col-sm-12">
                    <div class="main_left wow fadeInLeft">
                        <img src="./img/33-spirit8-digital-agency_03.png" alt="">
                    </div>
                </div>

                <!-- 右边内容 -->
                <div class="col-lg-6 col-md-6 col-sm-12">
                    <div class="main_right">
                        <div class="main_right_title wow fadeInDown">
                            <p>About us</p>
                        </div>
                        <div class="main_right_top wow fadeInDown">
                            <span>Some</span>
                            <span>words</span>
                            <span>about us</span>
                        </div>
                        <div class="main_right_font ">
                            <p class="wow wow fadeInDown">We love building and rebuilding brands through our  </p>
                            <p class="wow wow fadeInDown">specific skills. Using colour, fonts, and illustration, we </p>
                            <p class="wow wow fadeInDown">brand companies in a way they will never forget.</p>
                        </div>

                        <div class="main_right_lis">
                            <ul>
                                <li class="wow fadeInDown">Mission - We deliver uniqueness and quality</li>
                                <li class="wow fadeInDown">Skills - Delivering fast and excellent results</li>
                                <li class="wow fadeInDown">Clients - Satisfied clients thanks to our experience</li>
                            </ul>
                        </div>
                        <div class="main_btn wow fadeInDown">
                            <span class="glyphicon glyphicon-lock"></span>
                            <span>Browse our work</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 菜单 -->
    <div class="menu" id="b">
        <div class="container">
            <div class="row">
                <div class="menu_title wow fadeInDown">
                    <span>Meet </span>
                    <span>our team</span>
                </div>
        
                <div class="wow fadeInDown">
                    <img src="./img/33-spirit8-digital-agency1_03.png" class="center-block" alt="">
                </div>
        
                <div>
                    <div class="col-lg-3 col-xs-6 col-sm-6 col-md-3">
                        <div class="menu_box wow fadeInDown" data-wow-delay="100ms ">
                            <div class="manu_img">
                                <img src="http://fxl.web3v.work/img/logo.jpg" class="center-block" alt="">
                            </div>
    
                            <div class="menu_font">
                                <p>Jason Statham</p>
                                <p>Knife designer</p>
                            </div>
    
                            <div class="memu_list">
                                <ul>
                                    <li>Do not seek to change what has come </li>
                                    <li>before. Seek to create that which has </li>
                                    <li>not.</li>
                                </ul>
                            </div>
                        </div>
                       
                    </div>

                    <div class="col-lg-3 col-xs-6 col-sm-6 col-md-3">
                        <div class="menu_box wow fadeInDown" data-wow-delay="200ms ">
                            <div class="manu_img">
                                <img src="http://fxl.web3v.work/img/logo.jpg" class="center-block" alt="">
                            </div>
    
                            <div class="menu_font">
                                <p>Van Damme</p>
                                <p>No English</p>
                            </div>
    
                            <div class="memu_list">
                                <ul>
                                    <li>Do not seek to change what has come </li>
                                    <li>before. Seek to create that which has </li>
                                    <li>not.</li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-3 col-xs-6 col-sm-6 col-md-3">
                        <div class="menu_box wow fadeInDown" data-wow-delay="300ms ">
                            <div class="manu_img">
                                <img src="http://fxl.web3v.work/img/logo.jpg" class="center-block" alt="">
                            </div>
    
                            <div class="menu_font">
                                <p>Sylvester Stallone</p>
                                <p>Cigar Lover</p>
                            </div>
    
                            <div class="memu_list">
                                <ul>
                                    <li>Do not seek to change what has come </li>
                                    <li>before. Seek to create that which has </li>
                                    <li>not.</li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-3 col-xs-6 col-sm-6 col-md-3">
                        <div class="menu_box wow fadeInDown" data-wow-delay="400ms ">
                            <div class="manu_img">
                                <img src="http://fxl.web3v.work/img/logo.jpg" class="center-block" alt="">
                            </div>
    
                            <div class="menu_font">
                                <p>Jet Li</p>
                                <p>I need more money</p>
                            </div>
    
                            <div class="memu_list">
                                <ul>
                                    <li>Do not seek to change what has come </li>
                                    <li>before. Seek to create that which has </li>
                                    <li>not.</li>
                                </ul>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <!-- 分页 -->
            <div class="paging">
                <ul>
                    <li class="wow fadeInLeft" data-wow-delay="100ms"></li>
                    <li class="wow fadeInLeft" data-wow-delay="200ms"></li>
                    <li class="wow fadeInLeft" data-wow-delay="300ms"></li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 子菜单 -->
    <div class="submenu" id="c">
        <div class="container">
            <div class="row">

                <div class="submenu_title wow fadeInDown">
                    <span>take a look at</span>
                    <span>our services</span>
                </div>
        
                <div>
                    <img src="./img/33-sqpirit8-digital-agency_03.png" alt="" class="center-block wow fadeInUpBig">
                </div>
        
                <div class="submenu_font wow fadeInDown">
                    <p>Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a trea</p>
                    <p>tise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
                </div>
        
                <div>
                    <div class="col-lg-3 col-xs-6 col-sm-6 col-md-3">
                        <div class="submenu_box wow fadeInLeft" data-wow-delay="100ms">
                            <span class="iconfont">&#xe600;</span>
                        </div>

                            <div class="submenu_list wow fadeInUp" data-wow-delay="100ms">
                                <p>Web design</p>
                                <ul>
                                    <li>The first line of Lorem Ipsum, "Lorem </li>
                                    <li>ipsum dolor sit amet..", comes from a </li>
                                    <li>line in section 1.10.32.</li>
                                </ul>
                            </div>
                    </div>

                    <div class="col-lg-3 col-xs-6 col-sm-6 col-md-3">
                        <div class="submenu_box wow fadeInLeft" data-wow-delay="200ms">
                            <span class="iconfont">&#xe601;</span>
                        </div>

                        <div class="submenu_list wow fadeInUp" data-wow-delay="200ms">
                            <p>Mobile apps</p>
                            <ul>
                                <li>The first line of Lorem Ipsum, "Lorem </li>
                                <li>ipsum dolor sit amet..", comes from a </li>
                                <li>line in section 1.10.32.</li>
                            </ul>
                        </div>
                    </div>

                    <div class="col-lg-3 col-xs-6 col-sm-6 col-md-3">
                        <div class="submenu_box wow fadeInRight" data-wow-delay="100ms">
                            <span class="iconfont">&#xe613;</span>
                        </div>

                        <div class="submenu_list wow fadeInUp" data-wow-delay="100ms">
                            <p>PHOTOGRAPHY</p>
                            <ul>
                                <li>The first line of Lorem Ipsum, "Lorem </li>
                                <li>ipsum dolor sit amet..", comes from a </li>
                                <li>line in section 1.10.32.</li>
                            </ul>
                        </div>
                    </div>

                    <div class="col-lg-3 col-xs-6 col-sm-6 col-md-3">
                        <div class="submenu_box wow fadeInRight" data-wow-delay="200ms">
                            <span class="iconfont">&#xe8c7;</span>
                        </div>

                        <div class="submenu_list wow fadeInUp" data-wow-delay="200ms">
                            <p>marketing</p>
                            <ul>
                                <li>The first line of Lorem Ipsum, "Lorem </li>
                                <li>ipsum dolor sit amet..", comes from a </li>
                                <li>line in section 1.10.32.</li>
                            </ul>
                        </div>
                    </div>

                </div>

            </div>
        </div>
        
    </div>

    <div class="msg" id="d">
        <div class="msg_tiele wow fadeInDown">
            <span>SOME OF</span>
            <span>OUR CLIENTS</span>
        </div>

        <div class="msg_img wow fadeInUp">
            <img src="./img/33-spirit8-digital-agency1_03.png" alt="" class="center-block">
        </div>

        <div class="msg_font wow fadeInDown">
            <img src="./img/font.png" alt="">
        </div>

        <div class="msg_list">
            <ul>
                <li class="wow fadeInRight" data-wow-delay="100ms"></li>
                <li class="wow fadeInRight" data-wow-delay="200ms"></li>
                <li class="wow fadeInRight" data-wow-delay="300ms"></li>
            </ul>
        </div>
    </div>


    <div class="content" id="e">
        <div class="content_title wow fadeInDown">
            <span>take a look at </span>
            <span>our work</span>
        </div>

        <div class="wow fadeInDown">
            <img src="./img/33-sqpirit8-digital-agency_03.png" alt="" class="center-block">
        </div>

        <div class="content_font wow fadeInDown">
            <p>Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. </p>
            <p>This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes</p>
            <p> from a line in section 1.10.32.</p>
        </div>

        <div class="container">
            <div class="row">
                <div>
                    <div class="content_left wow fadeInDown">Filter by type</div>
                    <div class="content_right wow fadeInDown">
                        <ul>
                            <li>All</li>
                            <li>Web design</li>
                            <li>Mobile design</li>
                            <li>Photograpy</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        


    <div class="container_box">
        <div class="container">
            <div class="row">
                <div class="col-lg-3 col-xs-6 col-sm-6 col-md-3">
                    <div class="container_box">
                        <div class="content_img wow fadeInLeft" data-wow-delay="100ms">
                            <img src="./img/spirit8-digital-agency_03.png" class="center-block" alt="">
                        </div>
                    </div>
                </div>
            
                <div class="col-lg-3 col-xs-6 col-sm-6 col-md-3">
                    <div class="container_box">
                        <div class="content_img wow fadeInLeft" data-wow-delay="200ms">
                            <img src="./img/spirit8-digital-agency_03.png" class="center-block" alt="">
                        </div>
                    </div>
                </div>

                <div class="col-lg-3 col-xs-6 col-sm-6 col-md-3">
                    <div class="container_box">
                        <div class="content_img wow fadeInLeft" data-wow-delay="300ms">
                            <img src="./img/spirit8-digital-agency_03.png" class="center-block" alt="">
                        </div>
                    </div>
                </div>

                <div class="col-lg-3 col-xs-6 col-sm-6 col-md-3">
                    <div class="container_box">
                        <div class="content_img wow fadeInLeft" data-wow-delay="400ms">
                            <img src="./img/spirit8-digital-agency_03.png" class="center-block" alt="">
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>


    <div class="container_box">
        <div class="container">
            <div class="row">
                <div class="col-lg-3 col-xs-6 col-sm-6 col-md-3">
                    <div class="content_img wow fadeInRight" data-wow-delay="100ms">
                        <img src="./img/33-spirit8-digital-agencsy_03.png" class="center-block" alt="">
                    </div>
                </div>

                <div class="col-lg-3 col-xs-6 col-sm-6 col-md-3">
                    <div class="content_img wow fadeInRight" data-wow-delay="200ms">
                        <img src="./img/33-spirit8-digital-agencsy_03.png" class="center-block" alt="">
                    </div>
                </div>

                <div class="col-lg-3 col-xs-6 col-sm-6 col-md-3">
                    <div class="content_img wow fadeInRight" data-wow-delay="300ms">
                        <img src="./img/33-spirit8-digital-agencsy_03.png" class="center-block" alt="">
                    </div>
                </div>

                <div class="col-lg-3 col-xs-6 col-sm-6 col-md-3">
                    <div class="content_img wow fadeInRight" data-wow-delay="400ms">
                        <img src="./img/33-spirit8-digital-agencsy_03.png" class="center-block" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container_box">
        <div class="container">
            <div class="row">

                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                    <div class="content_img wow fadeInUp" data-wow-delay="100ms">
                        <img src="./img/33-spirit8-digidddtal-agency_03.png" class="center-block" alt="">
                    </div>
                </div>

                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                    <div class="content_img wow fadeInUp" data-wow-delay="200ms">
                        <img src="./img/33-spirit8-digidddtal-agency_03.png" class="center-block" alt="">
                    </div>
                </div>

                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                    <div class="content_img wow fadeInUp" data-wow-delay="300ms">
                        <img src="./img/33-spirit8-digidddtal-agency_03.png" class="center-block" alt="">
                    </div>
                </div>
                
                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                    <div class="content_img wow fadeInUp" data-wow-delay="400ms">
                        <img src="./img/33-spirit8-digidddtal-agency_03.png" class="center-block" alt="">
                    </div>
                </div>

            </div>
        </div>
    </div>


    </div>


    <div class="tool">

        <div class="tool_tilte wow fadeInDown">
            <span>our clients'</span>
            <span>testimonials</span>
        </div>

        <div class="wow fadeInDown">
            <img src="./img/33-spirit8-digital-agency1_03.png" class="center-block" alt="">
        </div>

        <div class="tool_font wow fadeInDown">
            <p>This book is a treatise on the theory of ethics, very popular during the Renaissance. The first </p>
            <p>line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        </div>

        <div class="tool_bottom wow fadeInDown">
            <span>Dean Martin, </span>
            <span>CEO Acme Inc.</span>
        </div>

        <div class="tool_list">
            <ul>
                <li class="wow fadeInDown" data-wow-delay="100ms"></li>
                <li class="wow fadeInDown" data-wow-delay="200ms"></li>
                <li class="wow fadeInDown" data-wow-delay="300ms"></li>
            </ul>
        </div>

    </div>

    <div class="from" id="f">

        <div class="from_title wow fadeInDown">
            <span>feel free to </span>
            <span>contact us</span>
        </div>

        <div class="wow fadeInDown">
            <img src="./img/33-sqpirit8-digital-agency_03.png" class="center-block" alt="">
        </div>

        <div class="from_font wow fadeInDown">
            <p>Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes</p>
            <p>of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular </p>
            <p>during the Renaissance. </p>
        </div>

        <div class="container">
            <div class="row">
                <div class="from_box">
                    <div class="col-xs-12 col-lg-6 col-md-6"> 
                        <div class="from_left  wow fadeInDown">
                            <span>Name</span>
                            <span>*</span>
                            <div>
                                <input type="text" class="input">
                            </div>
                        </div>
                        
                    </div>
        
                    <div class="col-xs-12 col-lg-6 col-md-6">
                        <div class="from_right  wow fadeInDown">
                            <span>Email address</span>
                            <span>*</span>
                            <div>
                                <input type="text" class="input">
                            </div>
                        </div>
                    </div>

                    <div class="from_text  wow fadeInDown">
                        <div class="font_text">
                            <span>Message</span>
                            <span>*</span>
                        </div>
                        <div class="text">
                            <textarea cols="171" rows="10" ></textarea>
                        </div>
                        
                    </div>
                    <div class="from_btn wow fadeInDown">SEDN</div>
                </div>
            </div>
            
        </div>
    </div>

    <!-- 底部 -->
    <div class="footer">
        <div class="container">
            <div class="row">
                <!-- 左边 -->
                <div class="col-lg-8 col-md-8">
                    <div class="footer_left wow fadeInDown">ALL RIGHTS RESERVED. COPYRIGHT © 2014 SPIRIT8</div>
                </div>
                <!-- 右边 -->
                <div class="col-lg-4 col-md-4">
                    <div class="footer_right">
                        <img class="wow fadeInLeft" data-wow-delay="100ms" src="./img/icon1.png" alt="">
                        <img class="wow fadeInLeft" data-wow-delay="200ms" src="./img/icon2.png" alt="">
                        <img class="wow fadeInLeft" data-wow-delay="300ms" src="./img/icon3.png" alt="">
                        <img class="wow fadeInLeft" data-wow-delay="400ms" src="./img/icon4.png" alt="">
                        <img class="wow fadeInLeft" data-wow-delay="500ms" src="./img/icon5.png" alt="">
                    </div>
                </div>
            </div>
        </div>

    </div>
    
</body>
<!-- 引入less文件 -->
<script src="./js/less.js"></script>
<!-- 引入jq文件 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- 引入bootstrap js文件 -->
<script src="./js/bootstrap.min.js"></script>
<!-- 引入wow.js文件 -->
<script src="./js/wow.min.js"></script>
<script src="./js/wow.js"></script>
<script>
    new WOW().init();
</script>
</html>